What is Eddie?
Eddie is a new code editor written in Liberty BASIC, for Liberty BASIC. Eddie can be customized and extended to meet the needs of the individual programmer. The first version is available here: Eddie!
Here is a screenshot of Eddie, version 1:
GUI Program Design
When we begin a program, we need to know what the program will do. How will it interact with the user? When programs are GUI-based, the controls on the program's windows allow the user to interact with the program. User actions are called "events." The controls such as buttons and menus have "event handlers" that evaluate user input and act on it.
Event Handlers
In Liberty BASIC 4, event handlers for most events can be either branch labels or subs. For now, Eddie will use branch labels to handle events. Branch labels begin with the name of the code routine in square brackets, and end with a WAIT statement. A branch label with code to handle an event looks like this:
[new]
#1.te "CLS"
Wait
Outline to Design
There are many ways to design a program. We can use a flow chart or an outline, for instance. We'll use a loose outline. Here is the whole outline. The individual parts are discussed below. As Eddie progresses, we can add features, but this outline includes the absolute minimum for a code editor.
- FILE
- create new files
- open existing files
- save files to disk
- print files
- exit
- EDIT
- cut text
- copy text
- paste text
- RUN
- run code in Liberty BASIC
- create TKNs with Liberty BASIC
- HELP
- help and instructions
- about the program
FILE
What do we need in a code editor? We need ways to manipulate source code files. We need to be able to create a new file, open an existing file, save a file to disk, or print a file. We also need a way to exit the program.
Eddie needs to do these things with files:
FILE
- create new files
- open existing files
- save files to disk
- print files
- exit
Knowing that we need these features, we can add controls to access them. We can use menus, or buttons, or both. Here is a FILE menu that follows our outline:
Menu #1, "&File", "&New", [new], "&Open", [open], "&Save", [save],_
|,"&Print", [print], "E&xit", [quit]
Some people prefer to use buttons to access the features of a program. Buttons take a up a lot more space than menus. If a program has many features, there won't be room to include buttons for all of the features. We'll use buttons for the most often-used features. Here are the buttons for Eddie's File routines:
button #1.new, "New",[new],UL, 0, 0, 45, 20 button #1.open, "Open",[open],UL, 45, 0, 45, 20 button #1.save, "Save",[save],UL, 90, 0, 45, 20 button #1.print, "Print",[print],UL, 135, 0, 45, 20
EDIT
Eddie needs to provide the ability to do standard editing functions, like CUT COPY PASTE. Eddie should also give the user a way to search and replace text, undo, select all text and so on. Wow, that's a lot to do, isn't it? Fortunately, we don't have to write code for any of those functions! Liberty BASIC does all of that for us! Any window that contains a texteditor automatically contains two full-featured edit menus. One menu is automatically added to the menubar. The other is available to the user when he right-clicks in the texteditor.
Even though Liberty BASIC takes care of edit functions automatically, we'd still like to provide some buttons for the most often-use editing features. Here they are:
EDIT
- cut text
- copy text
- paste text
And here are the buttons to activate these features:
button #1.cut, "Cut",[cut],UL, 190, 0, 45, 20 button #1.copy, "Copy",[copy],UL, 235, 0, 45, 20 button #1.paste, "Paste",[paste],UL, 280, 0, 45, 20
RUN and HELP
In the first version of Eddie, we won't be implementing these features, but here are the minimum features for these topics. We'll want to be able to run code in Liberty BASIC and to cause Liberty BASIC to create tokenized files. We'll also need to provide instructions for the use of the program, and information "about" the program.
RUN
- run code in Liberty BASIC
- create TKNs with Liberty BASIC
HELP
- help and instructions
- about the program
We may add more features to these topics later. For now, here are the menus and buttons we'll use to provide these functions to Eddie.
Menu #1, "&Run","R&un", [run] Menu #1, "&Help", "He&lp", [help], "&About", [about] button #1.run, "Run",[run],UL, 335, 0, 45, 20 button #1.help, "Help",[help],UL, 380, 0, 45, 20
Locating and Grouping Program Features
Program design includes both the code structure and the user interface. One of the key words for the user interface is "intuitive." The interface ought to be easy for the user to navigate without a lot of instructions. The other key word is "standard." The two really go together.
Windows applications have some standard features that are the same from application to application. The FILE menu is generally the first menu on the left side of the menubar. We could put it in the middle or the right side of the menubar, but the user expects it to be on the left side, so that's where we should place it. In the same way, the HELP menu is generally the last one listed on the right side of the menubar.
Many applications have a set of buttons that comprise a toolbar at the top of the program window. The buttons on this toolbar are usually presented in an order similar to the menu order, and they are often grouped together into functional groups, with spaces in between. All of this makes the application easier for the user. Eddie will have menus and buttons grouped in the standard Windows way.
A word about colors.
Liberty BASIC gives us the ability to display controls in the colors we choose. Perhaps we'll add that feature in a future version, but only if the user can change it to suit his own taste. We should not force color choices onto the user unless it is really important to the program. The program's user will have a color scheme in place that works well for him. It's best to leave the interface colors set to the user's default.
Stubs
As we create the menus and controls that go on Eddie's window, we need to create the event handlers for them as well. We cannot write all of the code at once for these, so we include STUBS for them. STUBS are branch labels that do not yet contain code. They are there to remind us that we need to write code routines for these events. They are also there to prevent the fledgling program from crashing. If the user clicks a button whose event handler doesn't exist, the program will halt with an error. Here are some stubs for event handlers that are not yet created in the first version of Eddie:
[help]
'place code here
Wait
[about]
'place code here
Wait
Modularity
Using modularity means that we write code in discreet chunks to make modifications easy. We avoid jumping around the code as much as possible. To keep the routines modular, make sure that each GOSUB routine ends with RETURN, and each [BranchLabel] ends with WAIT. Avoid using GOTO whenever possible. That way, any routine can be modified without "breaking" the rest of the code. The use of functions and subs instead of branch labels is a good way to implement modularity. We have not used functions and subs in Eddie -- yet! Perhaps we will add some in future updates.
Comments
When we are writing code, we know what each routine does, why each control is included, and so on. A short time later, we may look at the code and wonder what is going on! Or, somebody else may want to benefit from our code. If we want others to understand our code, and if we want to understand it ourselves for future modifications, we need to add comments. Comments are essential! They do not add to the size of the finished program. They are not included when the code is tokenized, so use them liberally. Here are some of the comments in Eddie:
'LB will place Edit menu where you specify in list of menus 'do not use ampersand & in Edit menu caption 'a texteditor 'trap the close event, if the user closes the 'window with the X button 'set the font for the window and controls 'set a custom font for the texteditor 'cause the texteditor to resize automatically 'when the user resizes the window 'if the word SAVE is in the caption, LB 'automatically creates a SAVE dialog 'make sure that user had given the file a *bas extension 'get contents of texteditor into string variable 'open file and write text to it 'get contents of texteditor into string variable 'send text to printer 'cause printing to happen now 'place code here
MORE
For more on using texteditors, try this article: Texteditors
For the Eddie code, go here: Eddie